<template>
  <div class="sidebar">
    <el-menu
            class="sidebar-el-menu"
            background-color="#324157"
            text-color="#bfcbd9"
            active-text-color="#20a0ff"
            :default-active="onRoutes"
            :collapse="collapse"
            unique-opened
            router>
      <el-submenu v-if="item1.children.length > 0" v-for="item1 in menuList" :key="item1.id" :index="item1.id + ''">
        <template slot="title">
          <i :class="item1.icon"></i>
          <span>{{item1.title}}</span>
        </template>
        <el-submenu v-if="item2.children.length > 0" 
        v-for="item2 in item1.children" :key="item2.id"
                    :index="item2.id + ''">
          <template slot="title">
            <i :class="item2.icon"></i>
            <span>{{item2.title}}</span>
          </template>
          <el-submenu v-if="item3.children.length > 0" v-for="item3 in item2.children" :key="item3.id"
                      :index="item3.id + ''">
            <template slot="title">
              <i :class="item3.icon"></i>
              <span>{{item3.title}}</span>
            </template>
            <el-menu-item v-for="item4 in item3.children" :key="item4.id" :index="item4.index">
              <i :class="item4.icon"></i>
              <span>{{item4.title}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="item3.index">
            <i :class="item3.icon"></i>
            <span>{{item3.title}}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item v-else :index="item2.index">
          <i :class="item2.icon"></i>
          <span>{{item2.title}}</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item1.index">
        <i :class="item1.icon"></i>
        <span>{{item1.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "demo03",
    data() {
      return {
        collapse: false,
        menuList: []
      }
    },
    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      }
    },
    methods: {},
    created() {
      this.menuList = [
        {
          id: 1000,
          icon: "el-icon-star-off",
          title: "系统首页",
          index: "xitongshouye",
          children: []
        },
        {
          id: 2000,
          icon: "el-icon-star-off",
          title: "地质工程",
          index: "dizhigongcheng",
          children: []
        },
        {
          id: 3000,
          icon: "el-icon-star-off",
          title: "钻井工程",
          index: "",
          children: [
            {
              id: 3100,
              icon: "el-icon-star-off",
              title: "井基础数据",
              index: "",
              children: [
                {
                  id: 3110,
                  icon: "el-icon-star-off",
                  title: "井基本数据",
                  index: "jingjibenshuju",
                  children: []
                },
                {
                  id: 3120,
                  icon: "el-icon-star-off",
                  title: "地质分离数据",
                  index: "dizhifenlishuju",
                  children: []
                },
                {
                  id: 3130,
                  icon: "el-icon-star-off",
                  title: "井深结构数据",
                  index: "jingshenjiegoushuju",
                  children: []
                },
                {
                  id: 3140,
                  icon: "el-icon-star-off",
                  title: "井眼轨道数据",
                  index: "jingyanguidaoshuju",
                  children: []
                },
                {
                  id: 3150,
                  icon: "el-icon-star-off",
                  title: "钻井施工进度计划",
                  index: "zuanjingshigongjindujihua",
                  children: []
                }
              ]
            },
          ]
        },
        {
          id: 4000,
          icon: "el-icon-star-off",
          title: "录井工程",
          index: "lujinggongcheng",
          children: [
            {
              id: 4100,
              icon: "el-icon-star-off",
              title: "录井",
              index: "lujing",
              children: []
            },
            {
              id: 4200,
              icon: "el-icon-star-off",
              title: "三级菜单",
              index: "sanjicaidan",
              children: [
                {
                  id: 4210,
                  icon: "el-icon-star-off",
                  title: "富文本编辑器",
                  index: "fuwenbenbianjiqi",
                  children: []
                },
                {
                  id: 4220,
                  icon: "el-icon-star-off",
                  title: "markdown编辑器",
                  index: "markdownbianjiqi",
                  children: []
                }
              ]
            },
            {
              id: 4300,
              icon: "el-icon-star-off",
              title: "文件上传",
              index: "wenjianshangchuan",
              children: []
            }
          ]
        },
        {
          id: 5000,
          icon: "el-icon-star-off",
          title: "测井工程",
          index: "cejinggongcheng",
          children: []
        },
        {
          id: 6000,
          icon: "el-icon-star-off",
          title: "压裂试气",
          index: "yalieshiqi",
          children: []
        },
        {
          id: 7000,
          icon: "el-icon-star-off",
          title: "导入数据库",
          index: "",
          children: [
            {
              id: 7100,
              icon: "el-icon-star-off",
              title: "拖拽列表",
              index: "tuozhailiebiao",
              children: []
            },
            {
              id: 7200,
              icon: "el-icon-star-off",
              title: "拖拽弹框",
              index: "tuozhuaitankuang",
              children: []
            }
          ]
        },
        {
          id: 8000,
          icon: "el-icon-star-off",
          title: "知识库",
          index: "zhishiku",
          children: []
        },
        {
          id: 9000,
          icon: "el-icon-star-off",
          title: "系统管理",
          index: "",
          children: [
            {
              id: 9100,
              icon: "el-icon-star-off",
              title: "权限测试",
              index: "quanxianceshi",
              children: []
            },
            {
              id: 9200,
              icon: "el-icon-star-off",
              title: "404页面",
              index: "404yemian",
              children: []
            }
          ]
        }
      ];
    }
  }
</script>

<style scoped>
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
  }

  .sidebar > ul {
    height: 100%;
  }
</style>